<template>
  <div class="centerPanel">
    <map-container
      class="map-container"
      :showquerybtn="true"
      @viewHandle="viewHandle"
      @xzqhChange="xzqhChanged"
      @extentChange="extentChanged"
      @measureWidgetAdded="measureWidgetAdded"
      @measureWidgetRemoved="measureWidgetRemoved"
      @clear="cleared"
      :showxzqh="false"
    />
    <road-detail-dialog ref="roadDetailDialog"></road-detail-dialog>
  </div>
</template>

<script>
import mapContainer from "../../components/Map/mapContainer";
import { createLayer } from "@/utils/map";
import roadDetailDialog from "../../components/Map/roadDetailDialog";
export default {
  components: {
    mapContainer,
    roadDetailDialog,
  },
  data() {
    return {
      mapview: undefined,
      where: undefined,
      geometry: null,
      roadsurfaceFeatureLayer: undefined,
      roadsurfaceFeatureLayerView: undefined,
      roadFeatureLayerView: undefined,
      roadFeatureLayerView: undefined,
      mapViewClickHandler: undefined,
    };
  },
  computed: {},
  methods: {
    /**
     * @description: 地图加载完成事件
     * @param {*} value
     * @return {*}
     */
    async viewHandle(value) {
      console.log("mapview loaded");
      let _self = this;
      _self.mapview = value;
      _self.roadFeatureLayer = createLayer("roadlayer");
      // _self.roadsurfaceFeatureLayer = createLayer("roadsurfacelayer");

      //添加业务图层
      _self.mapview.map.addMany([
        // createLayer("shequ"),
        // _self.roadsurfaceFeatureLayer,
        _self.roadFeatureLayer,
      ]);
      _self.roadFeatureLayerView = await _self.mapview.whenLayerView(
        _self.roadFeatureLayer
      );
      // 修改默认的高亮颜色
      _self.roadFeatureLayerView.highlightOptions =
        window.mapConfig.symbols.highlightOptions;
      // _self.roadsurfaceFeatureLayerView = await _self.mapview.whenLayerView(
      //   _self.roadsurfaceFeatureLayer
      // );
      // 添加click事件，获取点击的屏幕坐标
      _self.mapViewClickHandler = _self.mapview.on("click", _self.mapViewClick);
    },
    /**
     * @description: 地图点击事件
     * @param {*} event
     * @return {*}
     */
    mapViewClick(event) {
      let _self = this;
      // console.log(event.mapPoint.x, event.mapPoint.y);
      // 调用hitTest方法，传入屏幕坐标查询点击位置的graphics信息
      _self.mapview.hitTest(event).then(function (response) {
        if (response.results.length) {
          let results = response.results.filter(function (result) {
            // 获取到的graphic是否属于特定的图层
            return result.graphic.layer === _self.roadFeatureLayer;
          });
          if (results.length != 0) _self.showRoadDetail(results[0].graphic);
        }
      });
    },
    /**
     * @description: 移除测量微件事件
     * @return {*}
     */
    measureWidgetAdded() {
      console.log("measureWidgetAdded");
      this.mapViewClickHandler.remove();
    },

    /**
     * @description: 移除测量微件事件，通过添加测量微件的添加、移除事件，解决地图测量与点击的冲突
     * @return {*}
     */
    measureWidgetRemoved() {
      console.log("measureWidgetRemoved");
      this.mapViewClickHandler.remove();
      this.mapViewClickHandler = this.mapview.on("click", this.mapViewClick);
    },

    /**
     * @description: 显示点状绿地详情信息
     * @param {*} graphic
     * @return {*}
     */
    showRoadDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];

        // 显示弹框
        this.$refs.roadDetailDialog.show(
          _self.mapview,
          feature,
          _self.roadFeatureLayerView
        );
      });
    },
    /**
     * @description: 显示其他绿地详情
     * @param {*} graphic
     * @return {*}
     */
    showQitaldDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        this.$refs.qitaldDetailDialog.show(
          _self.mapview,
          _self.qitaldFeatureLayerView,
          feature
        );
      });
    },
    /**
     * @description: 显示道路附属绿地详情
     * @param {*} graphic
     * @return {*}
     */
    showRoadldDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        // 显示弹框
        this.$refs.roadldDetailDialog.show(
          _self.mapview,
          _self.roadldFeatureLayerView,
          feature
        );
      });
    },
    showGusmmDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        this.$refs.gusmmDetailDialog.show(
          _self.mapview,
          _self.gusmmFeatureLayerView,
          feature
        ); // 显示弹框
      });
    },
    // 行政区划选择事件
    xzqhChanged(value) {
      this.$emit("xzqhChanged", value);
    },
    // 获取绘制的查询空间范围
    extentChanged(value) {
      this.$emit("extentChange", value);
    },
    // 清空重置
    cleared() {
      this.$emit("clear");
    },
  },
};
</script>

<style lang="scss" scoped>
.centerPanel {
  position: relative;
}

.centerPanel,
.map-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: calc(100vh - 60px);
}

.xzqhPanel {
  position: absolute;
  top: 1vw;
  left: 1vw;
  width: 10vw;
  z-index: 999;
}
//去掉点击地图的黑色边框
::v-deep .esri-view-surface--touch-none::after {
  outline: none !important;
}
</style>
